<template>
    <div class="three" ref="threeRef"></div>
</template>

<script lang="ts" setup>
import { ref, markRaw, onMounted } from "vue"
import * as THREE from "three"
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"
import { ArcballControls } from 'three/addons/controls/ArcballControls.js'
import { Water } from 'three/examples/jsm/objects/Water.js';


const scene = markRaw(new THREE.Scene())
const camera = markRaw(new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000))
camera.lookAt(0, 0, 0)
const renderer = markRaw(new THREE.WebGLRenderer())
const threeRef = ref()
onMounted(() => {
    renderer.setSize(window.innerWidth, window.innerHeight)
    renderer.setClearColor("#ffffff")
    threeRef.value.appendChild(renderer.domElement)
    const axesHelper = new THREE.AxesHelper(50);
    
    scene.add(axesHelper);
    add_light()
    add_controls()
    //add_glb()
    //add_glb2()
    add_ground()
    //add_water()
})
function add_glb() {
    const loader = new GLTFLoader()
    loader.load("glb/dike.glb", (glb: any) => {
        const model = glb.scene
        model.position.set(-5, 0, 2)
        model.scale.set(2, 2, 2)
        model.rotation.x = Math.PI / 2
        model.rotation.y = Math.PI / 2
        scene.add(model)
    }, (err: any) => {
        console.log("报错啦", err);
    })
}
function add_glb2() {
    const loader = new GLTFLoader()
    loader.load("glb/dike.glb", (glb: any) => {
        const model = glb.scene
        model.position.set(5, 0, 2)
        model.scale.set(2, 2, 2)
        model.rotation.x = Math.PI / 2
        model.rotation.y = Math.PI / 2
        scene.add(model)
    }, (err: any) => {
        console.log("报错啦", err);
    })
}
function add_ground() {
    const textureLoader = new THREE.TextureLoader()
    const texture = textureLoader.load("img/ground.jpg", (tures) => {
        tures.wrapS = tures.wrapT = THREE.RepeatWrapping
        tures.repeat.set(1, 1)
    })
    const geometry = new THREE.BoxGeometry(100, 30, 5)
    const material = new THREE.MeshStandardMaterial({
        map: texture
    })
    const cube = new THREE.Mesh(geometry, material)
    cube.position.set(0, 0, -2.5)
    scene.add(cube)
}
function add_controls() {
    const controls = new ArcballControls(camera, renderer.domElement, scene)
    controls.addEventListener("change", () => {
        renderer.render(scene, camera)
    })
    camera.position.set(0, 100, -100)
    //controls.setGizmosVisible(false)
    controls.update()
}
function add_light() {
    const light = new THREE.PointLight("#e74c3c", 1, 100)
    light.position.set(0, 0, 20)
    scene.add(light)
    const pointLightHelper = new THREE.PointLightHelper(light, 1)
    scene.add(pointLightHelper)
    const ambientLight = new THREE.AmbientLight("#ffffff")
    scene.add(ambientLight)
}
function add_water() {
    const water_cube = new THREE.BoxGeometry(10, 19.8, 2)
    const water = new Water(water_cube, {
        textureWidth: 112,
        textureHeight: 112,
        waterNormals: new THREE.TextureLoader().load("img/waterNormals.jpg", (texture) => {
            texture.wrapS = texture.wrapT = THREE.RepeatWrapping
        }),
        waterColor: "#1e90ff"
    })
    water.position.set(0, 0.1, 1)
    scene.add(water)
    function animate() {
        requestAnimationFrame(animate);
        water.material.uniforms['time'].value += 0.5 / 60.0; // 每帧更新时间参数
        renderer.render(scene, camera);
    }
    animate();
}
</script>

<style lang="scss" scoped>
.three {
    position: absolute;
    inset: 0;
}
</style>